<template>
    <div class="swiper-mode">
        <template v-if="list.length>0 &&availImgCount">
            <div class="swiper" ref="swiper">
                <div class="swiper-wrapper">
                    <template v-for="item in list">
                        <div :key="item.bannerid" v-if="item.flag" class="swiper-slide">
                            <el-image :src="item.img" :preview-src-list="[item.img]">
                            </el-image>
                        </div>
                    </template>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

                <!-- 如果需要滚动条 -->
                <!-- <div class="swiper-scrollbar"></div> -->
            </div>
        </template>
        <template v-else>
            <router-link :to="{ name: 'bannerAdd' }">
                <el-empty description="暂无图片,去上传"></el-empty>
            </router-link>
        </template>

    </div>
</template>

<script>
// 引入Swiper 及其相关的子模块
import Swiper, { Pagination, Navigation, Autoplay } from "swiper";
import * as demo from "swiper";
console.dir(demo);

export default {
    name: "SwiperMode",
    props: ["list"],
    data() {
        return {
            mySwiper: null,
        }
    },
    computed: {
        availImgCount() {
            return this.list.filter(v => v.flag).length;
        }
    },
    watch: {
        list() {
            this.$nextTick(() => {  // 等视图更新完毕(重新渲染-> 真实dom) 重新初始化
                console.log("list改变", this.$refs.swiper);
                this.initSwiper();
            })
        }
    },
    methods: {
        initSwiper() {
            console.log(123123, this.$refs.swiper);
            if (this.$refs.swiper) {
                this.mySwiper = new Swiper(this.$refs.swiper, {
                    // direction: 'vertical', // 垂直切换选项
                    loop: true, // 循环模式选项,
                    autoplay: {
                        duration: 3000,
                    },
                    observer: true,  // 如果你更改swiper 的样式（隐藏/显示）或修改其子元素（添加/删除幻灯片），Swiper 会更新（重新初始化）并触发 observerUpdate 事件
                    modules: [Pagination, Navigation, Autoplay],
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,  // 能否进行点击切换
                    },

                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },

                    // 如果需要滚动条
                    // scrollbar: {
                    //     el: '.swiper-scrollbar',
                    // },
                })
            }

        }
    },
    mounted() {
        console.log("list",this.list);
        this.initSwiper()
    }
}
</script>

<style lang="scss" scoped>
.swiper {
    width: 100%;
    height: 500px;
    overflow: hidden;
}

::v-deep .swiper .swiper-slide .el-image {
    width: 100%;
}

::v-deep .swiper .swiper-slide .el-image img {
    width: 100%;
}
</style>